<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<body>
<head>
<base href="<%=basePath%>">
<!-- jsp文件头和头部 -->
<%@ include file="../../system/main/main_top.jsp"%>
</head>
<p>请点击图像上的星球，把它们放大。</p>

<img src="static/img/eg_planets.jpg" border="0" usemap="#planetmap"
	alt="Planets" />

<map name="planetmap" id="planetmap">
	<area shape="circle" coords="180,139,14" href="javascript:void(0)" onclick="editTable();" target="_parent" title="Venus" alt="Venus" />
	<area shape="circle" coords="129,161,10" href="javascript:void(0)" onclick="editTable();" target="_parent" alt="Mercury" />
	<area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" />
</map>

<p>
	<b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name"
	属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。 <p>
	
	1.第一个area是圆形 <p>
	shape="circle"                      /*说明是圆形*/<p>
	coords="180,139,14"            /*圆心坐标是(180,139)，半径14*/<p>
	coords="129,161,10"            /*圆心坐标是(129,161)，半径10*/<p>
	2.第二个area是矩形<p>
	shape="rect"                         /*说明是矩形*/<p>
	coords="0,0,110,260"            /*左上角坐标是(0,0)，右下角坐标是(110,260)/<p>
	
	注。单位是像素，坐标可以是负值
	</p>

<!-- 引入 -->
<script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>\x3C/script>");</script>
<script type="text/javascript" src="static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="static/js/ace-elements.min.js"></script>
<script type="text/javascript" src="static/js/ace.min.js"></script>
<script type="text/javascript" src="static/js/chosen.jquery.min.js"></script><!-- 单选框 -->
<script type="text/javascript" src="static/js/bootstrap-datepicker.min.js"></script><!-- 日期框 -->
<script type="text/javascript" src="static/js/bootbox.min.js"></script><!-- 确认窗口 -->
<!-- 引入 -->

<script type="text/javascript">
$(top.hangge());
//修改
function editTable(){
	//window.parent.jzts();
	top.jzts();
	var diag = new top.Dialog();
	diag.Drag=true;
	diag.Title ="修改";
	diag.URL = '<%=basePath%>/commercial/table/goEditTable.do?tableid=1&layer=1';
	diag.Width = 400;
	diag.Height = 580;
	diag.CancelEvent = function() { //关闭事件
		if (diag.innerFrame.contentWindow.document
				.getElementById('centerOfMainFrame').style.display == 'none') {
			top.jzts();
			//setTimeout("self.location.reload()", 100);
			window.location.href='<%=basePath%>/commercial/table/list.do?layer=' + layer;
		}
		diag.close();
	};
	diag.show();
}
</script>
</body>
</html>
